<template>
  <div id="at">
    <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption"  @change="onEditorChange($event)"/>
    <div id="toolbar"></div>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import {
    quillEditor,
    Quill
  } from "vue-quill-editor"; //引入插件
  import "quill-mention";
  export default {
    name: "JQuillMention",
    components: {
      quillEditor,
    },
    props:{
      value: {
        type: String,
      },
      placeholder:{
        type: String,
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    data() {
      return {
        content:this.value,
        editorOption: {
                placeholder:this.placeholder,
                modules: {
                  toolbar:false,
                  mention: {
                    allowedChars: /^[\u4e00-\u9fa5\d]*$/,  //中文或数字
                    mentionDenotationChars: ["@"], // 通过@拉起人员框  
                    source:((searchTerm, renderList, mentionChar)=>{ 
                      if(mentionChar === "@"){
                        if(searchTerm){
                         this.getUserList(searchTerm).then((res)=>{
                           if(res && res.length > 0){
                             renderList(res)
                           }else{
                             renderList([])
                           }
                         })
                        }
                      }
                    }),  
                    // 选中后触发
                    onSelect: (item, insertItem) => {
                      // this.$emit('atUser', item.id)
                      insertItem(item)
                    }
                  },
                },
              },
      }
    },
    watch:{
      value:{
        immediate:true,
        handler:function(val){
          // this.content = val ? val :null
          if(!val){
            this.content = ''
          }
        }
      }
    },
    //获取组件实例
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
    methods: {
      //模糊搜索用户
      getUserList(keyWord) {
        if(keyWord){
        return new Promise((resolve) => {
          getAction('/sys/user/list',{username:keyWord,pageNo:1,pageSize:15}).then((res) => {
            if (res.success) {
              if(res.result.records && res.result.records.length > 0){
                let userData = res.result.records.map((item, index, arr) => {
                    let c = { id: item.username, value: item.username }
                    return c
                 })
                 resolve(userData)
              }          
            }else{
              reject()
            }
            
          })
        })
        }
      },
      onEditorChange(quill, html, text ){
       if(quill.html){
         const contentStr = this.removeHTMLTags(quill.html)
         const content = this.processMentions(contentStr)
         this.$emit('change',content)
       }
        
      },
      //去除html标签
      removeHTMLTags(str) {
        return str.replace(/<[^>]*>/g, '');
      },
      //处理字符串中的@人员
       processMentions(text) {
          // 使用正则表达式匹配@人员
          const mentionRegex = /@([^\s]+)/g;
          // 将匹配到的@人员替换为带有链接的HTML标记
          return text.replace(mentionRegex, '<a>@$1</a>');
      },   
      
    },

  }
</script>
<style>
  .ql-mention-list-container {
    width: 210px;
    max-height: 270px !important;
    overflow: auto;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    z-index: 999;
  }
  .ql-mention-list-item {
    cursor: pointer;
    font-size: 14px !important;
    line-height: 34px;
    padding: 0 20px !important;
    vertical-align: middle;
    list-style-type: none; 
  }
  .ql-mention-list{
    padding-left: 0;
  }
  .ql-container{
    border: 1px solid #d9d9d9 !important;
     border-radius: 6px;
  }
  .ql-editor {
    min-height: 110px;
    border-radius: 6px;
  }
  .ql-editor:focus{
     border: 1px solid #409eff !important;
  }
  .ql-mention-list-item.selected {
    background-color: #f5f7fa !important;
  }
  .ql-clipboard{
    display: none;
  }
  .mention {
    color: #409eff;
    background-color: transparent;
  }
  
  
</style>